/**
 * 数量加一操作
 */
function onPlus() {
    var plusEles = document.querySelectorAll('input[name="plus"]') //获取所有name值为plus的input输入框
        //循环遍历整个input输入框
    for (var i = 0; i < plusEles.length; i++) {
        //加按钮绑定点击事件
        plusEles[i].onclick = function() {
            //1.数量加一
            //获取数量amount元素节点
            //this表示当前对象，在此处表示当前点击的加号
            var amountEle = this.previousElementSibling //声明一个变量获得我们点击的也就是加号按钮的前面一个输入框
            var num = amountEle.value //获取数量值，声明一个num变量获取前面一个输入框里面的值
            num++ //加一 让num自加一
            amountEle.value = num //设置数量给元素节点  再把num的值赋给前面一个输入框

            //2.改变单个商品总价
            //2.1获取单个商品价格
            var priceEle = this.parentElement.previousElementSibling //声明一个价格变量得到我们点击的按钮的父亲也就是这个tr的前面一个元素
            var price = priceEle.innerHTML //声明一个变量等于前面一个输入框的显示值
            price = price.substring(1) //再把前面一个输入框的值从第一个数组开始截取到的值赋给price变量
                //类型转换字符串->数值 string->number
                // price = Number(price)
                // console.log(typeof price)
                //2.2 单价*数量=单个商品总价
            var totalPrice = price * num //隐式转换  让价格乘以数量得到一个新的变量
                // 2.3 赋值给单个商品总价
            var totalPriceEle = this.parentElement.nextElementSibling //声明一个新的变量到增加框的父元素的下一个兄弟元素
            totalPriceEle.innerHTML = '￥' + totalPrice.toFixed(2) //让总价框的显示值为价格乘以数量的值 前面加上¥，并且只保留两位小数

            //3.恢复减号操作
            var minusBtn = this.previousElementSibling.previousElementSibling //因为后面会禁用减号框  所以在点击增加按钮时恢复禁用  声明一个变量为：增加按钮的前面的前面的按钮  也就是减号框
            minusBtn.removeAttribute('disabled') //让减号框移除禁用属性

            //4.重新计算总价
            allTotalPrice()
        }
    }
}
/**
 * 数量减一
 */
function onMinus() {
    //1. 获取所有减按钮
    var minusEles = document.querySelectorAll('input[name="minus"]')
        //2.遍历所有减按钮,绑定事件
    for (var i = 0; i < minusEles.length; i++) {
        minusEles[i].onclick = function() {
            //3. 获取数量amount元素节点
            //this表示当前对象，此处表示当前点击的减号元素节点
            var amountEle = this.nextElementSibling
            var num = amountEle.value
                //4.边界处理 num不能小于0
            if (--num < 0) {
                num = 0
                this.setAttribute('disabled', true)
            }
            // 5. 将改变后的数量写回input输入框显示
            amountEle.value = num

            // 6. 单个商品总价改变
            // 6.1 单个商品价格
            var priceEle = this.parentElement.previousElementSibling
            var price = priceEle.innerHTML
            price = price.substring(1)
            console.log(price)
                //6.2 单价*数量=单个商品总价
            var totalPrice = price * num //隐式转换
                // 6.3 赋值给单个商品总价
            var totalPriceEle = this.parentElement.nextElementSibling
            totalPriceEle.innerHTML = '￥' + totalPrice.toFixed(2)

            //4.重新计算总价
            allTotalPrice()
        }
    }
}

/**
 * 计算所有商品总价
 *  思路:
 *    1. 遍历所有商品
 *    2. 获取单个商品总价格
 *    3. 累加求和
 */
function allTotalPrice() {
    var singleprices = document.querySelectorAll('.singleprice') //声明一个变量获取所有的单个总价
    var sum = 0 //声明一个总价变量
    for (var i = 0; i < singleprices.length; i++) { //遍历每一个总价
        var singlePrice = singleprices[i].innerHTML //声明一个变量获取每一个单个总价的显示值
        singlePrice = singlePrice.substring(1) //并且从现实值的第一个值开始截取  也就是去掉前面的¥符号
            // 类型转换
        singlePrice = Number(singlePrice) //将每一个单个总价的值转换为数值型
        sum += singlePrice //累加起来赋给sum
    }

    var totalPriceEle = document.querySelector('#totalPrice') //得到显示总价的部分
    totalPriceEle.innerHTML = `￥${sum.toFixed(2)}` //让总价部分的显示值为¥加上两位数的总价
}



function addTrels() {
    var bookName = document.querySelector('[name="bookname"]')
    var bookPrice = document.querySelector('[name="bookprice"]')
    var bookPicture = document.querySelector('[name="bookpicture"]')
    var tableObj = document.querySelector('table')
    var newTr = document.createElement('tr')
    var newTd = document.createElement('td')
    var newImg = document.createElement('img')
    newTd.appendChild(newImg)
    newImg.setAttribute('src', bookPicture.value)
    newImg.setAttribute('width', '57px')
    newImg.setAttribute('height', '74px')

    var newTd1 = document.createElement('td')

    newTd1.appendChild(document.createTextNode(bookName.value))

    var newTd2 = document.createElement('td')
    newTd2.appendChild(bookPrice.value)

    var inputObj1 = document.createElement('input')
    var inputObj2 = document.createElement('input')
    var inputObj3 = document.createElement('input')
    inputObj1.setAttribute('type', 'button')
    inputObj1.setAttribute('value', '-')
    inputObj1.setAttribute('name', 'minus')

    inputObj2.setAttribute('type', 'button')
    inputObj2.setAttribute('value', '0')
    inputObj2.setAttribute('name', 'amount')

    inputObj3.setAttribute('type', 'button')
    inputObj3.setAttribute('value', '+')
    inputObj3.setAttribute('name', 'plus')

    var newTd3 = document.createElement('td')
    newTd3.appendChild(inputObj1)
    newTd3.appendChild(inputObj2)
    newTd3.appendChild(inputObj3)

    var newTd4 = document.createElement('td')
    var newTd4Txt = document.createTextNode('￥0')
    newTd4.setAttribute('class', 'singleprice')
    newTd4.setAttribute('width', '100px')
    newTd4.appendChild(newTd4Txt)

    var newTd5 = document.createElement('td')
    var newA1 = document.createElement('a')
    var newA2 = document.createElement('a')
    var Atxt1 = document.createTextNode('移入收藏')
    var Atxt2 = document.createTextNode('删除')
    newA1.appendChild(Atxt1)
    newA2.appendChild(Atxt2)
    newTd5.appendChild(newA1)
    newTd5.appendChild(newA2)

    newTr.appendChild(newTd)
    newTr.appendChild(newTd1)
    newTr.appendChild(newTd2)
    newTr.appendChild(newTd3)
    newTr.appendChild(newTd4)
    newTr.appendChild(newTd5)

    tableObj.appendChild(newTr)
}
// addTrels()

/**
 * 添加商品
 *   问题:表单提交时,会执行默认action动作,跳转到其它页面,如果没有指定其它页面，则会刷新当前页面
 *   解决: button按钮改变成普通按钮不会触发action动作,
 *       type="button"
 *
 */
function addProduct() {
    var addBtn = document.querySelector('#addbookbtn') //获取添加书籍按钮
    var tableEle = document.querySelector('table') //获取整个table

    addBtn.onclick = function() { //点击提交按钮时
        //0.获取表单内容
        var inputNameEle = document.querySelector('input[name="bookname"]') //通过name值获取书籍名称输入框
        var inputPriceEle = document.querySelector('input[name="bookprice"]') //通过name值获取价格输入框
        var inputPictureEle = document.querySelector('input[name="bookpicture"]') //通过name值获取图片链接输入框
        var bookName = inputNameEle.value //声明一个变量获取书籍名称框的值
        var bookPrice = inputPriceEle.value //声明一个变量获取价格框的值
        var bookPicture = inputPictureEle.value //声明一个变量获取图片链接框的值

        //1.创建商品项
        //创建一个字符串，放入原来的tr里面的所有td，不要tr
        var trStr = `  
        <td><img src="${bookPicture}" alt="book22" width="57" height="74"></td>
        <td>${bookName}</td>
        <td>￥${bookPrice}</td>
        <td><input type="button" name="minus" value="-"><input type="text" name="amount" value="0"><input type="button" name="plus" value="+"></td>
        <td class="singleprice" width="100px">￥0</td>
        <td><a href="#">移入收藏</a><br><a href="#" class="delete-btn">删除</a></td>
    `
            //1.1创建tr商品项节点
        var trEle = document.createElement('tr') //声明一个变量接受我们创造的新的tr
            //1.2将strStr字符串作为内容赋值给tr节点
        trEle.innerHTML = trStr //将trStr的值当作是新变量tr的显示值  此时里面已经有td  所以是一个完整的tr
            //2.添加商品项节点到table
        tableEle.appendChild(trEle) //再在table里面加入这样一个tr

        //3.清除表单内容
        inputNameEle.value = '' //添加进去后将书籍名称框的值变为空
        inputPriceEle.value = '' //添加进去后将书籍价格狂的值变为空
        inputPictureEle.value = '' //

        //4.给新增加的商品项重新绑定删除事件
        deleteProduct()
        onMinus()
        onPlus()
    }
}

/**
 * 删除商品
 */
function deleteProduct() {
    //1.获取所有删除按钮
    var deleteBtns = document.querySelectorAll('.delete-btn')
        //2.遍历所有删除按钮，绑定删除事件
    for (var i = 0; i < deleteBtns.length; i++) {
        deleteBtns[i].onclick = function() {
            this.parentElement.parentElement.remove()
        }
    }
}

onPlus()
onMinus()
allTotalPrice()
addProduct()
deleteProduct()